const path = require('path');
const {ProgressPlugin, DefinePlugin} = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const progressHandle = (percentage, message, ...args) => {
    console.info((percentage * 100).toFixed(2) + '%', message, ...args);
}

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        port: 9000,
        client:{
            overlay:{
                errors: true,
                warnings: false
            }
        }
    },
    mode: 'production', // mode:'development' | 'production',
    resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.js|jsx|ts|tsx$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    modules: false,
                                    useBuiltIns: 'usage',
                                    corejs: 3
                                }
                            ],
                            '@babel/preset-react',
                            '@babel/preset-typescript',
                        ],
                        plugins: ['@babel/plugin-syntax-dynamic-import']
                    },
                }
            }
        ]
    },
    plugins: [
        new TerserPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'index.html')
        }),
        new DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production'),
            'custom': JSON.stringify('custom')
        }),
        // new ProgressPlugin(progressHandle)
    ],
    stats: {
        children: true,
        errorDetails: true
    }
}